<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>员工信息修改</span>
        <el-button @click="backUserList" style="float: right; padding: 3px 0" type="text">返回员工列表</el-button>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="账户" prop="name">
            <el-input style="width: 300px" v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input style="width: 300px" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input style="width: 300px" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="name">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option
                      label="男"
                      value="1">
              </el-option>
              <el-option
                      label="女"
                      value="0">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="departmentId">
            <el-select v-model="form.departmentId" placeholder="请选择">
              <el-option
                      v-for="depart in departmentIds"
                      :label="depart.departmentName"
                      :value="depart.departmentId"
                      :key="depart.departmentId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="name">
            <div class="block">
              <el-date-picker
                      v-model="form.birthday"
                      type="date"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      :placeholder="form.birthday">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="手机号" prop="name">
            <el-input style="width: 300px" v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="name">
            <el-input style="width: 300px" v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="等级" prop="name">
            <template>
              <el-select v-model="form.mylevel" placeholder="请选择">
                <el-option
                        v-for="item in perssion"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="用户类型" prop="name">
            <template>
              <el-select v-model="form.userType" placeholder="请选择">
                <el-option
                        v-for="item in perssion"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
        <el-button @click="submit" type="primary">提交修改</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
  import {getDepartmentId, editUser} from "../../network/UserInfo";

  export default {
    name: "UserEdit",
    data() {
      return {
        departmentIds:[],
        form: {
          account: '',
          password: '',
          name: '',
          sex: '',
          birthday: '',
          mobile: "",
          email: "",
          mylevel: "",
          createTime : "",
          state : "",
          userType : "",
          createTime: '',
          departmentId: ''
        },
        perssion: [{
          name: '员工',
          value: '2'
        },
          {
            name: '经理',
            value: '1'
          },
          {
            name: '超级管理员',
            value: '0'
          },
        ]

      }
    },
    methods: {
      getUserData() {
       this.form = this.$store.state.userData
      },
      backUserList() {
        this.$router.back(1)
      },
      submit() {
        editUser(this.form).then(res => {
          setTimeout(() => {
            this.$router.back(1)
          }, 500)
        },err => {
          console.log("失败啦"+err);
        })
      }
    },
    created() {
      this.getUserData()
      getDepartmentId().then(res => {
        this.departmentIds = res.data
      })
    },
    mounted() {
      this.getUserData()
    },
  }
</script>

<style scoped>

</style>
